<html> 
    <head> 
        <title></title> 
        <link rel="stylesheet" type="text/css" href="css/present.css" /> 
<script type="text/javascript">
$(function() {
   $(".hide").hide();
   $(".stepa").css({opacity: 0});
   sub = { index:0, steps: [], step: function() {sub.steps[sub.index++]();}};
   sub.next= function () { return sub.index >= sub.steps.length };
   sub.steps.push(function() {$(".step0").show();});
   sub.steps.push(function() {$(".stepa").show().animate({opacity:1},1000)});
   sub.steps.push(function() {$(".stepa").animate({'height': 0, 'width': 0}, 1000
                , function() { $(this).hide(); $(".step0").hide();
       stretchSketch = StretchSketch.load({url: '../../iPath/wineMan.jsvg', controlPanel: $('#below')});
    $(".step1").show();})});
});
</script>

    </head> 
<body class="jsxgraph_body"> 
<ol> 
<li class="">Where do you put your wine?</li>
<li class="step0 hide">Not on your couch
<p class="stepa hide"><img src="images/wine-problem.jpg" height="400"/></p>
</li>
<li class="step1 hide">Watch out with the coffee table!
<div class="wineman container">
<div class="svg_border ">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">  </svg>
</div>
<div id="below">
</div>
</div>
</li>
</ol> 
</body> 
</html> 
